<!--日期范围选择组件-->
<template>
  <a-form-item :label="label">
    <div class="c-form-double-date-picker">
      <div>
        <a-date-picker
            :placeholder="!isDisabled?placeholder1:''"
            v-decorator="vDecorator"
            :disabled="isDisabled"
            :style="getStyle"
            :format="format"
            @change="beginChange"
            :disabled-date="disabledStartDate"
            :locale="locale"
        ></a-date-picker>
      </div>
      <div>
        ~
      </div>
      <div>
        <a-form-item>
          <a-date-picker
              :placeholder="!isDisabled?placeholder2:''"
              v-decorator="vDecorator2"
              :disabled="isDisabled"
              :style="getStyle"
              :format="format"
              @change="endChange"
              :disabled-date="disabledEndDate"
              :locale="locale"
          ></a-date-picker>
        </a-form-item>
      </div>
    </div>
  </a-form-item>
</template>

<script>
import './css/form.less'
import { mixin } from './js/form.js'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'

moment.locale('zh-cn')
export default {
  name: 'AntFormDoubleDatePicker',
  mixins: [mixin],
  props: {
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否由form表单自动布局
     */
    autoLayoutByForm: {
      type: Boolean,
      default: true
    },
    /**
     * 显示文本
     */
    label: {
      type: String,
      default: ''
    },
    /**
     * 开始时间输入提示
     */
    placeholder1: {
      type: String,
      default: ''
    },
    /**
     * 结束时间输入提示
     */
    placeholder2: {
      type: String,
      default: ''
    },
    /**
     * 开始时间绑定字段 ['phone' ,{ rules: [{ required: true},{validator:function(rule, value, callback)] }],自定义验证方法时callback回调函数必须在方法中调用，
     * 失败返回错误提示callback("xxx")，成功返回callback()
     */
    vDecorator: {
      type: Array,
      default: () => []
    },
    /**
     * 结束时间绑定字段 ['phone' ,{ rules: [{ required: true},{validator:function(rule, value, callback)] }],自定义验证方法时callback回调函数必须在方法中调用，
     * 失败返回错误提示callback("xxx")，成功返回callback()
     */
    vDecorator2: {
      type: Array,
      default: () => []
    },
    /**
     * 日期格式，YYYY/MM/DD DD/MM/YYYY YYYY/MM...
     */
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    /**
     * 参数拼接是否开启
     */
    paramSplicingOpen: {
      type: Boolean,
      default: false
    },
    /**
     * 参数拼接：用于查询条件时，开启后 默认 从开始日期的凌晨到结束时间截至（23:59:59），可以自定义（必须按指定格式传入）
     * 如：2022-01-01~2022-09-22，开启后传到后台 2022-01-01 00:00:00~2022-09-22 23:59:59
     */
    paramSplicing: {
      type: Object,
      default: () => {
        return {
          start: '00:00:00',
          end: '23:59:59'
        }
      }
    },
    /**
     * css样式，优先级最高
     */
    cstyle: {
      type: String,
      default: ''
    },
    /**
     * 非自动布局的宽度，优先级最低
     */
    defaultWidth: {
      type: Number,
      default: 240
    }
  },
  data() {
    return {
      //是否禁用，由AntForm组件调用
      cdisabled: false,
      startValue: null,
      endValue: null,
      locale,
      moment: moment
    }
  },
  computed: {
    /**
     * 获取样式
     */
    getStyle() {
      return { width: (this.percentageLayoutWidth ? this.percentageLayoutWidth : this.defaultWidth) + 'px', ...this.cstyle }
    }
  },
  created() {
  },
  mounted() {
    // 自动添加验证为空时的message
    let vDecorator = this.vDecorator
    if (vDecorator.length > 1 && vDecorator[1].rules) {
      let rules = vDecorator[1].rules
      rules.forEach(obj => {
        if (obj.required && !obj.message) {
          obj.message = '请选择' + this.label
        }
      })
    }
  },
  beforeDestroy() {
  },
  methods: {
    /**
     * 开始时间选择发生改变事件
     * @param date
     * @param dateString
     */
    beginChange(date, dateString) {
      this.startValue = date
      this.$emit('beginChange', dateString)
    },
    /**
     * 结束时间选择发生改变事件
     * @param date
     * @param dateString
     */
    endChange(date, dateString) {
      this.endValue = date
      this.$emit('endChange', dateString)
    },
    /**
     * 禁用的开始时间选择项
     * @param startValue
     * @returns {boolean}
     */
    disabledStartDate(startValue) {
      const endValue = this.endValue
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue.format('YYYY-MM-DD') + ' 23:59:59').valueOf()
    },
    /**
     * 禁用的结束时间选择项
     * @param endValue
     * @returns {boolean}
     */
    disabledEndDate(endValue) {
      const startValue = this.startValue
      if (!endValue || !startValue) {
        return false
      }
      return moment(startValue.format('YYYY-MM-DD') + ' 00:00:00').valueOf() > endValue.valueOf()
    },
    /**
     * 赋值之前的转换操作,由AntForm组件自动调用
     * 参数：recordPara，转换之前的record
     * 返回值：转换之后的可用于赋值的对象
     */
    beforeSetValue(recordPara) {
      let record = {}
      let key = this.vDecorator[0]
      let val = recordPara[key]
      val = val == null ? null : this.moment(val, this.format)
      record[key] = val
      let key1 = this.vDecorator2[0]
      let val1 = recordPara[key1]
      val1 = val1 == null ? null : this.moment(val1, this.format)
      record[key1] = val1
      this.startValue = val
      this.endValue = val1
      return record
    },
    /**
     * 取值之前的转换操作,由AntForm组件自动调用
     * 参数：recordPara，转换之前的record
     * 返回值：转换之后的对象
     */
    beforeGetValue(recordPara) {
      let record = {}
      let key = this.vDecorator[0]
      let val = recordPara[key]
      let key1 = this.vDecorator2[0]
      let val1 = recordPara[key1]
      if (this.paramSplicingOpen) {
        val = !val ? null : val.format(this.format) + ' ' + this.paramSplicing.start
        val1 = !val1 ? null : val1.format(this.format) + ' ' + this.paramSplicing.end
      } else {
        val = !val ? null : val.format(this.format)
        val1 = !val1 ? null : val1.format(this.format)
      }
      record[key] = val
      record[key1] = val1
      return record
    }
  }
}
</script>

<style lang="less" scoped>
.c-form-double-date-picker {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}

::v-deep .ant-form-item {
  margin: 0px;
}
</style>
